<template>
  <div class="customer">
    <van-nav-bar
        title="丹能库存查询列表"
        left-arrow
        left-text="返回"
        @click-left="back"
    />
    <van-search
        v-model="fbillno"
        shape="round"
        show-action
        background="#57a3f3"
        placeholder="请输入代码或名称或规格型号"
    >
      <template #action>
        <van-button round  size="small" type="info" @click="onSearch(1)" style="width: 60px;">查询</van-button>
      </template>
    </van-search>
    <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
      <van-list style="overflow: scroll">
        <div class="listColumn">
          <div>代码</div>
          <div>名称</div>
          <div>规格型号</div>
          <div>单位</div>
          <div>库存</div>
        </div>
        <div class="listItem" v-for="(task, index) in taskList" :key="index">
          <div>{{ task.FNumber }}</div>
          <div>{{ task.FName }}</div>
          <div>{{ task.FModel }}</div>
          <div>{{ task.funit }}</div>
          <div>{{ task.FQty }}</div>
        </div>
      </van-list>
    </div>
<!--    <div>-->
<!--      <van-pagination v-model="pageNo" mode="simple" :total-items="total" :show-page-size="6" :items-per-page="pageSize" force-ellipses @change="changePg">-->
<!--        <template #prev-text>-->
<!--          <van-icon name="arrow-left" />-->
<!--        </template>-->
<!--        <template #next-text>-->
<!--          <van-icon name="arrow" />-->
<!--        </template>-->
<!--        <template #page="{ text }">{{ text }}</template>-->
<!--      </van-pagination>-->
<!--    </div>-->

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { dngetItem1 } from '@/api/api'
  import { Notify } from 'vant'

  export default {
    name: "dnStockQuery",
    components: {
    },
    data () {
      return {
        loading: false,
        fbillno: '', // 单据编号
        pageNo:1,
        total: 0, // 总页数
        pageSize: 20, //每页显示条数
        taskList: []
      }
    },
    computed: {
      ...mapState({
        openId: state => state.user.openId
      })
    },
    mounted() {
    },
    created () {
      this.getList(1)
    },
    methods: {
      changePg () {
        this.getList(this.pageNo)
      },
      onSearch (pageNo) {
        this.getList(pageNo)
      },
      // pageNo
      getList () {
        dngetItem1({
          FNumber: this.fbillno,
          // pageNo: pageNo,
          // pageSize: this.pageSize
        }).then(res => {
          if (res.success) {
            this.taskList = res.result
            // this.total = res.result.total
          }else {
            Notify({ type: 'danger', message: res.message, duration: 4000 })
          }

        })
      },
      back () {
        this.$router.push({name: 'modules'})
      },
    }
  }
</script>

<style scoped>
  .customer{
    min-height: 100vh;
    background: #ffffff;
  }
  .listColumn{
    width: 800px;
    display: flex;
    line-height: 45px;
    background: #eee;
  }
  .listColumn div:nth-of-type(1) {
    width: 150px;
  }
  .listColumn div:nth-of-type(2) {
    width: 150px;
  }
  .listColumn div:nth-of-type(3) {
    width: 300px;
  }
  .listColumn div:nth-of-type(4) {
    width: 100px;
  }
  .listColumn div:nth-of-type(5) {
    width: 100px;
  }
  .listItem{
    width: 800px;
    display: flex;
    line-height: 38px;
    border-bottom: 1px solid #eeeeee;
  }
  .listItem div:nth-of-type(1) {
    width: 150px;
  }
  .listItem div:nth-of-type(2) {
    width: 150px;
  }
  .listItem div:nth-of-type(3) {
    width: 300px;
  }
  .listItem div:nth-of-type(4) {
    width: 100px;
  }
  .listItem div:nth-of-type(5) {
    width: 100px;
  }
</style>